<!--
//
// Trigger.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/10.
//
-->
<template>
    <div class="Index">
        <!-- 标题和筛选区 -->
        <table-search-bar :config="{}" :model="{}" hide-search title="组织管理" />
        <!--  内容  -->
        <div class="container">
            <!-- 功能按钮 -->
            <div class="table-buttons">
                <el-button v-permission="permission.add" type="primary" @click="addData">
                    <b-icon name="bi-plus" size="20" />
                    添加
                </el-button>
            </div>
            <!--checkbox设置 :checkbox-config="{trigger: 'row', highlight: true}" -->
            <!--radio设置 :radio-config="{trigger: 'row', highlight: true}" -->
            <vxe-table ref="VXETable" :column-config="{ resizable: false}" :data="state.list" :loading="state.isLoading" :radio-config="{trigger: 'row', highlight: true}" :row-config="{isCurrent: true, isHover: true, keyField: 'id'}" :tree-config="{childrenField: 'children', reserve: true}" border round show-overflow size="small" @current-change="() => {}" @radio-change="() => {}"

            >
                <template #empty>
                    <el-empty :image-size="100" />
                </template>

                <vxe-column fixed="left" title="#" type="seq" width="80" />
<!--                <vxe-column align="center" field="sortOption" fixed="left" title="排序" width="50">-->
<!--                    <template #default="{row}">-->
<!--                        <div class="sort-option">-->
<!--                            <el-button link size="small" type="primary" @click="sortData(1, row)">-->
<!--                                <b-icon name="bi-caret-up-fill" />-->
<!--                            </el-button>-->
<!--                            <el-button link size="small" type="primary" @click="sortData(0, row)">-->
<!--                                <b-icon name="bi-caret-down-fill" />-->
<!--                            </el-button>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </vxe-column>-->
                <vxe-column align="left" field="name" :fixed="$fixedColumn('left')" min-width="200" title="组织名称" treeNode></vxe-column>
                <vxe-column field="orgType" title="类型" width="100">
                    <template #default="{row}">
                        <el-tag v-if="row.orgType===1">单位</el-tag>
                        <el-tag v-if="row.orgType===2" type="warning">科室</el-tag>
                    </template>
                </vxe-column>
<!--                <vxe-column field="areaCode" title="区域编码" width="100"></vxe-column>-->
                <vxe-column field="remark" min-width="200" title="备注"></vxe-column>
                <vxe-column :resizable="false" field="action" title="操作" :width="$widthColumn(150)">
                    <template #default="{row}">
                        <table-action :actions="[
                            {title: '修改', permission: permission.edit, type: 'primary', ok: editData},
                            {title: '删除', permission: permission.delete, show: !row.children || row.children.length === 0, type: 'danger', ok: deleteData, confirm: '您确定要删除当前数据么?'},
                            {title: '添加下级', show: row.orgType === 1, permission: permission.add, type: 'primary', ok: addSubData, inMore: true},
                            // {title: '选择用户', show: row.orgType===2, permission: permission.chooseUser, type: 'primary', ok: chooseUserData, inMore: true},
                        ]" :data="row" />
                    </template>
                </vxe-column>
            </vxe-table>
        </div>
    </div>
    <EditForm ref="editForm" />
    <ChooseUser ref="chooseUser" />
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "./api.js";
import EditForm from "./EditForm.vue";
import ChooseUser from "./ChooseUser.vue"

const {$message, $fixedColumn, $widthColumn} = window;

// 路由
const router = useRouter();
// store
const store = useStore();

// 响应式数据
const state = reactive({
    // 表格刷新
    isLoading: false,
    // 表格数据源
    list: []
})
// 当前页面需要的功能权限
const permission = {
    add: "SysOrg:AddOrgInfo",
    delete: "SysOrg:DeleteOrgInfo",
    edit: "SysOrg:UpdateOrgInfo",
    chooseUser: "SysUser:UpdateOrgUserList"
}

const editForm = ref();

// 添加
function addData() {
    editForm.value.show({
        title: "添加",
        options: {},
        ok() {
            loadList()
        }
    })
}

// 删除
async function deleteData({id}) {
    const {success} = await api.DeleteOrgInfo({id});
    if (!success) return;
    $message.success("删除成功");
    loadList()
}

// 修改
function editData(row) {
    editForm.value.show({
        title: "修改",
        options: {...row},
        ok() {
            loadList()
        }
    })
}

// 添加下级
function addSubData(row) {
    editForm.value.show({
        title: "添加下级",
        options: {pid: row.id, orgType: 2},
        ok() {
            loadList()
        }
    })
}

// 调整排序
async function sortData(type, row) {
    const {success} = await api.MoveOrgOrder({isUp: type, orgId: row.id});
    if (!success) return;
    loadList(true)
}

// 选择用户
const chooseUser = ref()

function chooseUserData(row) {
    // 单位 id 就是组织的 pid
    const pid = row.pid;
    const parent = state.list.treeFind(item => item.id === pid);
    // 区划编号就是上级组织的区划编号
    let areaCode;
    if (parent) {
        areaCode = parent.areaCode;
    }
    row.bureauId = pid;
    row.areaCode = areaCode;
    chooseUser.value.show({
        title: "选择用户",
        options: {...row}
    })
}

// 查询列表
const VXETable = ref()

async function loadList(hideLoading) {
    if (!hideLoading) {
        state.isLoading = true
    }
    const {success, data} = await api.GetOrgTreeList();
    state.isLoading = false
    if (!success) return;
    state.list = data || [];
    state.list.treeMap(item => {
        if (item.pid === 0) {
            item.pid = null
        }
        return item;
    })
}

// 复制
function setCopy(text) {
    window.$copyText(text)
}


onMounted(() => {
    loadList()
})
</script>

<style lang="scss" scoped>
.Index {
    margin: 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;

    .container {
        padding: 10px;
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);
    }

    .sort-option {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .el-button {
            margin-left: unset;
            height: 10px;
        }
    }
}
</style>
